<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./yl/react.development.js"></script>
    <script type="text/javascript" src="./yl/react-dom.development.js"></script>
    <script type="text/javascript" src="./yl/babel.min.js"></script>
</head>
<body>

<!--
状态必须通过setState方法更新
render中的this指向的是类实例
state接收的必须是一个对象，不能是数组。
-->
<div id="app"></div>
<script type="text/babel">
    class Person extends React.Component {
        state = {data: {name: false}, age: 16}
        //构造函数总直接写方法
        handleSubmit = () => {
            //修改sate中的值
            //更新状态的方式是合并，如果新的对象中值与原有对象重复，以新对象为主
            this.setState({
                data: {name: !this.state.data.name}
            })
        }
        //继承过React.Component 的函类组件必须实现render法且方法必须要返回值，返回的就是组件的内容
        render() {
            return <div>
                <h1>sate函数介绍</h1>
                <h1>{this.state.data.name ? '是个憨憨' : '不是憨憨'}+{this.state.age}</h1>
                <button onClick={this.handleSubmit}>切换状态值</button>
            </div>;
        }
    }

    ReactDOM.render(<Person/>, document.getElementById('app'))
</script>
</body>
</html>
